<template>
  <div class="baseBox">
    <Card>
      <Form v-model:form="form" :formList="formList" layout="inline" @save="search">
        <template #status>
          <a-select v-model:value="form.status" placeholder="请选择">
            <a-select-option value="1">开启</a-select-option>
            <a-select-option value="2">关闭</a-select-option>
          </a-select>
        </template>
        <template #import_type>
          <!-- 1 人工导入， 2 平台收录， -->
          <a-select v-model:value="form.import_type" placeholder="请选择">
            <a-select-option value="2">平台收录</a-select-option>
            <a-select-option value="1">人工导入</a-select-option>
          </a-select>
        </template>
      </Form>
    </Card>
    <Table class="mt_20 flex" :width="2300" :dataSource="keywordList" :columns="columns" :pagination="pagination" @handleChangeList="handleChangeList">
      <template #header>
        <div class="d_f w_100b">
          <a-space>
            <a-button type="primary" @click="openImport">批量导入 </a-button>
            <a-button type="primary" @click="output">导出 </a-button>
            <a-button
              type="primary"
              @click="$download('thesaurusImport.txt', '词库导入模板')"
              >模板下载</a-button
            >
          </a-space>
          <div class="flex" style="display: flex; justify-content: flex-end">
            <a-button type="primary" @click="add">新增 </a-button>
          </div>
        </div>
      </template>
      <template v-slot:number>
        <div style="cursor: pointer;" @click="clickSort('id')">
          <span>序号</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:gjc>
        <div style="cursor: pointer;" @click="clickSort('keywords')">
          <span>关键词</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:pm>
        <div style="cursor: pointer;" @click="clickSort('sort_str')">
          <span>排名</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:hqsj>
        <div style="cursor: pointer;" @click="clickSort('updated_at')">
          <span>获取时间</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template v-slot:czsj>
        <div style="cursor: pointer;" @click="clickSort('created_at')">
          <span>操作时间</span>
          <span style="font-weight: bold;margin-left: 5px;">↕️</span>
        </div>
      </template>
      <template #dict="{ value }">
        {{ value?.title || '-' }}
      </template>
      <!-- 导入方式 -->
      <!-- 1 人工导入， 2 平台收录， -->
      <template #import_type="{ value, record }">
        <span v-if="value == 2"
          >平台收录 {{ record.source_type ? `-${record.source_type}` : "" }}</span
        >
        <span v-if="value == 1"
          >人工导入 {{ record.source_type ? `-${record.source_type}` : "" }}</span
        >
      </template>
      <template #username="{ value }">
        {{ value?.username }}
      </template>
      <template #sort_str="{ value }">
        {{ value || '-' }}
      </template>

      <template #listen_status="{ value }">
        <span v-if="value == 1" style="color: #2bcdc4">监控开启</span>
        <span v-if="value == 2" style="color: #ff544c">监控关闭</span>
      </template>
      <template #action="{ value }">
        <a-space>
          <a-button type="primary">监控查看 </a-button>
          <a-button
            v-if="value.listen_status == 1"
            type="primary"
            @click="videoSwitch(value)"
            >关闭监控
          </a-button>
          <a-button
            v-if="value.listen_status == 2"
            type="primary"
            @click="videoSwitch(value)"
            >开启监控
          </a-button>
          <a-popconfirm
            title="是否删除？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="del(value)"
          >
            <a-button type="primary">删除 </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </Table>
  </div>
  <!-- 新增/修改 -->
  <Edit v-model:visible="editVisible" :tempData="selectInfo" @reload="reload" />
  <!-- 导入 -->
  <Import v-model:visible="importVisible" @reload="reload" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { formList, columns } from "./href";
import Card from "@/components/Card";
import Form from "@/components/Form";
import Table from "@/components/Table";
import Edit from "./Edit";
import Import from "./Import";
import { keywordsApi } from "@/api";

const form = ref({});
const keywordList = ref([]);
const selectInfo = ref({});

const editVisible = ref<boolean>(false);
const importVisible = ref(false);

let is_asc = 0;
let pagination =ref({
  total: 0,
  current: 1,
  defaultPageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '50', '100']
})
let currentPage = 1;
let pageNum = 10;

const clickType = ref('');

onMounted(() => {
  getData();
});

// 重新排序
function clickSort(type){
  if(is_asc == 0){
    is_asc = 1
  }else{
    is_asc = 0
  }
  currentPage = 1;
  pagination.value.current = 1;
   clickType.value = type;
  getData();
}

async function getData() {
  const result = await keywordsApi.page({
    page: currentPage,
    limit: pageNum,
    is_desc: is_asc == 0 ? 'asc' : 'desc',  // desc 降序， asc 升序
    field: clickType.value,
    ...form.value,
  });
  const { data } = result;
  pagination.value.total = result.total
  keywordList.value = data;
}
function handleChangeList(e){
  currentPage = e.current //当前页数
  pageNum = e.pageSize //每页显示条数
  pagination.value.current = e.current;
  getData()
}
function search() {
  currentPage = 1;
  pagination.value.current = 1;
  getData();
}
function add() {
  selectInfo.value = {};
  editVisible.value = true;
}
function edit(item) {
  selectInfo.value = item;
  editVisible.value = true;
}
async function del(item) {
  const { id } = item;
  await keywordsApi.delete({
    id,
  });

  keywordList.value = keywordList.value.filter((i) => i.id != id);
}
function reload() {
  getData();
}

async function videoSwitch(item) {
  const { id, listen_status } = item;
  await keywordsApi.videoSwitch({
    id,
  });
  if (listen_status == 1) item.listen_status = 2;
  if (listen_status == 2) item.listen_status = 1;
}

function openImport() {
  importVisible.value = true;
}
function output() {
  keywordsApi.output();
}
</script>

<style lang="less" scoped></style>
